{% extends "repo/repo.html" %}

{% block subcontainer %}
<div class="pulse inner bubble">
  <h2 class="heading">总览</h2>
{%for fork_repos in fork_repos_tree%}
{%for fork_repo in fork_repos%}
<div class="repo-{{forloop.parentloop.counter}}">
  <figure class="avatar">
    <img src="https://gravatar.com/avatar/{{fork_repo.imgurl}}?s=65" alt="{{ fork_repo.username }}">
  </figure>
  <div class="summary">
    <p class="name">
      <a class="c_img_{{forloop.parentloop.counter}}" href="/{{fork_repo.username}}/{{fork_repo.name}}/">{{fork_repo.username}}</a>
    </p>
    <p class="meta extra-info" title="{{fork_repo.desc}}">{{fork_repo.desc|truncatechars:40}}</p>
  </div>
  {% comment %}
  <ul class="actions horizontal-list">
    <li><a href="javascript:void(0)" rel="tooltip" data-original-title="commit {{ fork_repo.commit }}次数" class="label"><i class="icon-time"></i><span>{{ fork_repo.commit }}</span></a></li>
    <li><a href="javascript:void(0)" rel="tooltip" data-original-title="watch {{ fork_repo.watch }}次数" class="label"><i class="icon-star"></i><span>{{ fork_repo.watch }}</span></a></li>
    <li><a href="javascript:void(0)" rel="tooltip" data-original-title="fork {{ fork_repo.fork }}次数" class="label"><i class="icon-code-fork"></i><span>{{ fork_repo.fork }}</span></a></li>
  </ul>
  {% endcomment %}
</div>
{%endfor%}
{%endfor%}

{% if star_users %}
<div class="header-ribbon">
  <h2 class="heading">收藏用户</h2>
</div>
<div class="stars">
  {%for star_user in star_users%}
  <div class="member">
    <figure class="avatar">
      <img src="https://gravatar.com/avatar/{{ star_user.imgurl }}?s=65" alt="{{star_user.username}}">
    </figure>
    <div class="summary">
      <p class="name">
        <a href="/{{star_user.username}}/">{{star_user.username}}</a>
        {%if star_user.nickname%}
        <span>({{star_user.nickname}})</span>
        {%endif%}
        {%if star_user.tweet%}
        <span class="tweet" title="{{star_user.tweet}}">{{star_user.tweet|truncatechars:20}}</span>
        {%endif%}
      </p>
      <p class="meta">
        <span><i class="icon-time"></i><span class="unixtime">{{star_user.date_joined}}</span>加入</span>
        <span class="divider"></span>
        <span><i class="icon-map-marker"></i><span class="unixtime">{{star_user.last_login}}</span>登录</span>
      </p>
    </div>
  </div>
  {%endfor%}
</div>
{% endif %}

{% if watch_users %}
<div class="header-ribbon">
  <h2 class="heading">关注用户</h2>
</div>
<div class="watchers">
  {%for watch_user in watch_users%}
  <div class="member">
    <figure class="avatar">
      <img src="https://gravatar.com/avatar/{{ watch_user.imgurl }}?s=65" alt="{{watch_user.username}}">
    </figure>
    <div class="summary">
      <p class="name">
        <a href="/{{watch_user.username}}/">{{watch_user.username}}</a>
        {%if watch_user.nickname%}
        <span>({{watch_user.nickname}})</span>
        {%endif%}
        {%if watch_user.tweet%}
        <span class="tweet" title="{{watch_user.tweet}}">{{watch_user.tweet|truncatechars:20}}</span>
        {%endif%}
      </p>
      <p class="meta">
        <span><i class="icon-time"></i><span class="unixtime">{{watch_user.date_joined}}</span>加入</span>
        <span class="divider"></span>
        <span><i class="icon-map-marker"></i><span class="unixtime">{{watch_user.last_login}}</span>登录</span>
      </p>
    </div>
  </div>
  {%endfor%}
</div>
{% endif %}
{% endblock %}
</div>
{% block subjs %}
<script>
  $(function(){

    $('.actions').tooltip({
      selector: "a[rel=tooltip]"
    });

    var bubbleLeftColHeight = $('.bubble-col:eq(0)').height(), bubbleRightColHeight = $('.bubble-col:eq(1)').height();
    var bubbleInnerHeight = (bubbleLeftColHeight < bubbleRightColHeight) ? bubbleRightColHeight : bubbleLeftColHeight;

    $('.bubble-col > .bubble-inner').height(bubbleInnerHeight);

  });
</script>
{% endblock %}
